<template>
  <div>
    <van-nav-bar fixed title="区号" left-text right-text="按钮" left-arrow @click-left="onClickLeft" />
    <div style="margin-top:60px">
      <input
        type="text"
        value
        placeholder="输入地区"
        placeholder-class="placeholder-class"
        class="input"
        confirm-type="search"
        v-model="searchValue"
      />
    </div>
    <!-- 列表 -->
    <van-index-bar>
      <div class="country-list" v-for="(v,i) in indexList" :key="i">
        <van-index-anchor :index="i">{{indexKey[i]}}</van-index-anchor>
        <div
          @click="countrylogin(v1.phoneCode)"
          class="list"
          v-for="(v1,i1) in indexList[i]"
          :key="i1"
        >
          <span>{{v1.name}}</span>
          <span>{{v1.phoneCode}}</span>
        </div>
      </div>
    </van-index-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchValue: "",
      firstName: [],
      indexList: [],
      indexKey: []
    };
  },
  created() {
    this.rolling();
  },
  mounted() {},
  methods: {
    //   返回
    onClickLeft() {
      this.$router.push({ path: "/login" });
    },
    countrylogin(num) {
      this.$router.push({
        path: "/login",
        query: {
          code: num
        }
      });
    },
    rolling() {
      let that = this;
      that.$axios.get(that.address.listCountryaz, {}).then(res => {
        that.indexList = res.data;
        that.indexKey = Object.keys(that.indexList);
        console.log(that.indexList, 6666);
        console.log(that.indexKey[0]);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.input {
  width: 95%;
  height: 30px;
}
.country-list {
  .list {
    display: flex;
    padding: 0 30px;
    align-items: center;
    border-bottom: 1px #f7f7f7 solid;
    height: 40px;
    justify-content: space-between;
  }
}
</style>